/*
 * @Author: shijianxin
 * @Date: 2022-04-24 15:11:44
 * @Description: 电影列表
 */

import React from "react";
import { IMovieState } from "../redux/reducers/MovieReducer";
import { Button, Input, message, Popconfirm, Space, Switch, Table } from "antd";
import { IMovie } from "../services/MovieService";
import { ColumnProps, TablePaginationConfig } from "antd/lib/table";
import defaultposterImg from "../assets/default.jpg";
import { SwitchType } from "../services/CommonType";
import { NavLink } from "react-router-dom";
import { SearchOutlined } from "@ant-design/icons";

export interface IMovieTableEvents {
  /**
   * 完成加载之后的事件
   */
  onLoad: () => void;
  onSwitchChange: (type: SwitchType, newState: boolean, id: string) => void;
  onDelete: (id: string) => Promise<void>;
  onChange: (newPage: number) => void;
  onKeyChange: (key: string) => void;
  onSearch: () => void;
}

export default class extends React.Component<IMovieState & IMovieTableEvents> {
  componentDidMount() {
    if (this.props.onLoad) {
      this.props.onLoad();
    }
  }
  private getFilterDropDown(p: Object) {
    return (
      <div style={{ padding: 8 }}>
        <Input
          value={this.props.condition.key}
          style={{ marginBottom: 8, display: "block" }}
          onChange={(e) => this.props.onKeyChange(e.target.value)}
          onPressEnter={this.props.onSearch}
        />
        <Space>
          <Button
            type="primary"
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
            onClick={this.props.onSearch}
          >
            搜索
          </Button>
          <Button
            size="small"
            style={{ width: 90 }}
            onClick={() => {
              this.props.onKeyChange("");
              this.props.onSearch();
            }}
          >
            重置
          </Button>
        </Space>
      </div>
    );
  }
  private getColumns(): ColumnProps<IMovie>[] {
    return [
      {
        title: "封面图",
        dataIndex: "poster",
        render: (poster) => {
          if (poster) {
            return <img className="tablePoster" src={'/api' + poster} />;
          } else {
            return <img className="tablePoster" src={defaultposterImg} />;
          }
        },
      },
      {
        title: "电影名称",
        dataIndex: "name",
        filterDropdown: this.getFilterDropDown.bind(this),
        filterIcon: <SearchOutlined />,
      },
      {
        title: "地区",
        dataIndex: "areas",
        render: (text: string[]) => {
          return text.join("，");
        },
      },
      {
        title: "类型",
        dataIndex: "types",
        render: (text: string[]) => {
          return text.join("，");
        },
      },
      {
        title: "时长",
        dataIndex: "timeLong",
        render: (timeLong) => {
          return timeLong + "分钟";
        },
      },
      {
        title: "正在热映",
        dataIndex: "isHot",
        render: (isHot, record) => {
          return (
            <Switch
              checked={isHot}
              onChange={(newVal) => {
                this.props.onSwitchChange(
                  SwitchType.isHot,
                  newVal,
                  record._id!
                );
              }}
            ></Switch>
          );
        },
      },
      {
        title: "即将上映",
        dataIndex: "isComing",
        render: (isComing, record) => {
          return (
            <Switch
              checked={isComing}
              onChange={(newVal) => {
                this.props.onSwitchChange(
                  SwitchType.isComing,
                  newVal,
                  record._id!
                );
              }}
            ></Switch>
          );
        },
      },
      {
        title: "经典影片",
        dataIndex: "isClassic",
        render: (isClassic, record) => {
          return (
            <Switch
              checked={isClassic}
              onChange={(newVal) => {
                this.props.onSwitchChange(
                  SwitchType.isClassic,
                  newVal,
                  record._id!
                );
              }}
            ></Switch>
          );
        },
      },
      {
        title: "操作",
        dataIndex: "_id",
        render: (id: string) => {
          return (
            <div>
              <NavLink to={"/movie/edit/" + id}>
                <Button type="primary" size="small">
                  编辑
                </Button>
              </NavLink>
              <Popconfirm
                placement="bottom"
                title="确定要删除吗？"
                onConfirm={async () => {
                  await this.props.onDelete(id);
                  message.success("删除成功");
                }}
                okText="确定"
                cancelText="取消"
              >
                <Button type="primary" danger size="small">
                  删除
                </Button>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
  }

  getPageConfig(): TablePaginationConfig | false {
    if (this.props.total === 0) {
      return false;
    }
    return {
      current: this.props.condition.page,
      pageSize: this.props.condition.limit,
      total: this.props.total,
    };
  }

  handleChange(pagination: TablePaginationConfig) {
    this.props.onChange(pagination.current!);
  }

  render() {
    return (
      <Table
        rowKey="_id"
        dataSource={this.props.data}
        columns={this.getColumns()}
        pagination={this.getPageConfig()}
        onChange={this.handleChange.bind(this)}
        loading={this.props.isLoading}
      ></Table>
    );
  }
}
